<template>
	<view class="content">
		<view class="main">
			<navgit :navigationMsg="navigationMsg"></navgit>
			<view class="lists_top">
				<view class="tab">
					<view class="tab-item" v-for="(item,index) in tabList" :key="index" @click="changeTab(item,index)">
						<view :class="tabActiveIndex==index?'text activeText':'text'">
							{{item.text}}
						</view>
						<view :class="tabActiveIndex==index?'icon activeIcon':'icon'"></view>
					</view>
				</view>
			</view>
			<view class="lists_curd" v-for="(item,index) in curds" :key="index">
				<view class="lists_curd_top">
					<view class="curd_top_left">
						<image :src="item.images" style="width: 100%;height: 100%;" mode=""></image>
					</view>
					<view class="curd_top_right">
						<p style="width: 400rpx;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 30rpx;line-height: 80rpx; ">{{item.name}}</p>
						<p style="font-size: 20rpx;color: #9D9E9E;line-height: 35rpx;">套餐：{{item.pote}}</p>
						<p style="font-size: 20rpx;color: #9D9E9E;line-height: 35rpx;">租期：{{item.times}}</p>
						<p style="font-size: 20rpx;color: #9D9E9E;line-height: 35rpx;">数量：{{item.number}}</p>
					</view>
				</view>
				<view class="lists_curd_bottom" style="border-top: 1px solid #ccc;">
					<view class="curd_btm_left">
					<p style="font-size: 25rpx;line-height: 90rpx;">共{{item.types}}件 ￥ <span style="font-size: 35rpx;">{{item.monys}}</span> </p>
					</view>
					<view class="curd_btm_right">
						<u-button text="开票" style="width: 170rpx;height: 70rpx;background-color: #FCD748;border: none;border-radius: 50rpx;margin-top: 10rpx;margin-right: 20rpx;"></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navgit from "../../../common/navgats/navgats.vue"
	export default {
		data() {
			return {
				navigationMsg: {
					title: "开票",
					bgColor: "#ffffff"
				},	
				tabList: [{
					id: 1,
					text: "可开票订单"
				}, {
					id: 2,
					text: "开票记录"
				}],
				//tab选中下标
				tabActiveIndex: 0,
				curds:[
					{
					images:"/static/商店.png",
					name:"99新iPhone12 A14仿生芯片超wqfasdgsdgadfhgdsf原色钛金属色随租随还",
					pote:"512GB原色钛金属色随租随还",
					times:"2025.03.21",
					number:1,
					types:1,
					monys:9800.00
					},
					{
					images:"/static/商店.png",
					name:"99新iPhone12 A14仿生芯片超wqfasdgsdgadfhgdsf原色钛金属色随租随还",
					pote:"512GB原色钛金属色随租随还",
					times:"2025.03.21",
					number:1,
					types:1,
					monys:9800.00
					},
					{
					images:"/static/商店.png",
					name:"99新iPhone12 A14仿生芯片超wqfasdgsdgadfhgdsf原色钛金属色随租随还",
					pote:"512GB原色钛金属色随租随还",
					times:"2025.03.21",
					number:1,
					types:1,
					monys:9800.00
					},
					{
					images:"/static/商店.png",
					name:"99新iPhone12 A14仿生芯片超wqfasdgsdgadfhgdsf原色钛金属色随租随还",
					pote:"512GB原色钛金属色随租随还",
					times:"2025.03.21",
					number:1,
					types:1,
					monys:9800.00
					},
					{
					images:"/static/商店.png",
					name:"99新iPhone12 A14仿生芯片超wqfasdgsdgadfhgdsf原色钛金属色随租随还",
					pote:"512GB原色钛金属色随租随还",
					times:"2025.03.21",
					number:1,
					types:1,
					monys:9800.00
					},
					{
					images:"/static/商店.png",
					name:"99新iPhone12 A14仿生芯片超wqfasdgsdgadfhgdsf原色钛金属色随租随还",
					pote:"512GB原色钛金属色随租随还",
					times:"2025.03.21",
					number:1,
					types:1,
					monys:9800.00
					},
					{
					images:"/static/商店.png",
					name:"99新iPhone12 A14仿生芯片超wqfasdgsdgadfhgdsf原色钛金属色随租随还",
					pote:"512GB原色钛金属色随租随还",
					times:"2025.03.21",
					number:1,
					types:1,
					monys:9800.00
					}
				]
			}
		},
		components:{
			navgit
		},
		methods: {
			changeTab(item, index) {
				this.tabActiveIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
*{
		font-size: 3vw;
		white-space: nowrap;
	}
.content{
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		overflow-y: auto;
	}
	.main{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lists_top{
		width: 100%;
		height: 130rpx;
		background-color: #ffffff;
	}
	.tab {
		width: 95%;
		height: 80rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	
		.tab-item {
			width: 340rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
	
			.text {
				font-size: 28rpx;
				color: #4b4b4b;
				font-weight: bold;
			}
	
			.activeText {
				color: black;
				font-weight: bold;
				font-size: 32rpx;
			}
	
			.icon {
				width: 50rpx;
				height: 20rpx;
			}
	
			.activeIcon {
				background-image: url("/static/index/tabActive.png");
				background-size: cover;
			}
		}
	}
	.lists_curd{
		width: 90%;
		height: 300rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lists_curd_top{
		width: 90%;
		height: 200rpx;
		display: flex;
		
	}
	.curd_top_left{
		width: 35%;
		height: 100%;
		
	}
	.curd_top_right{
		width: 65%;
		height: 100%;
	}
	.lists_curd_bottom{
		width: 90%;
		height: 100rpx;
		display: flex;
		
	}
	.curd_btm_left{
		width: 60%;
		height: 100%;
	}
	.curd_btm_right{
		width: 40%;
		height: 100%;
		display: flex;
		// justify-content: flex-end;
	}
</style>
